<template>
    <div class="container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>注册</span>
                </div>
            </template>
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="formData.username" placeholder="请输入登录名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入登录名"></el-input>
                </el-form-item>
                <!-- <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="验证码" prop="verifyCode">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input v-model="formData.verifyCode" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button @click="sendVerifyCode" :disabled="countDown > 0">
                {{ countDown > 0 ? `${countDown}s后重试` : '获取验证码' }}
              </el-button>
            </el-col>
          </el-row>
        </el-form-item> -->
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <!-- <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="formData.confirmPassword" placeholder="请再次输入密码"></el-input>
        </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="handleRegister">立即注册</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="quick-login">
            <span>其他登录方式：</span>
            <el-button-group>
                <el-button type="primary" icon="ElWeChat">微信</el-button>
                <el-button type="primary" icon="ElPhone">手机号</el-button>
            </el-button-group>
        </div>
        <div class="footer-links">
            <el-link href="#" underline="hover" @click="gethome">首页</el-link>
            <el-link href="#" underline="hover" @click="goToLogin">登录</el-link>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/request'
import { useRouter } from 'vue-router'
const router = useRouter()
const formRef = ref(null)
const formData = reactive({
    username: '',
    phone:'',
    // email: '',
    // verifyCode: '',
    password: ''
})
let timer = null

const rules = reactive({
    username: [
        { required: true, message: '请输入登录名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    // email: [
    //     { required: true, message: '请输入邮箱', trigger: 'blur' },
    //     { pattern: /[0-9a-zA-Z_-]+@[0-9a-zA-Z_-]+\.(com|cn|net|vip|cloud)/, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    // ],
    //   verifyCode: [
    //     { required: true, message: '请输入验证码', trigger: 'blur' },
    //     { min: 6, max: 6, message: '验证码为6位数字', trigger: 'blur' }
    //   ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码是8-20位字母、数字或特殊符号', trigger: 'blur' }
    ],
    //   confirmPassword: [
    //     { required: true, message: '请确认密码', trigger: 'blur' },
    //     { validator: (rule, value) => {
    //         if (value !== formData.password) {
    //           return new Error('两次输入的密码不一致')
    //         }
    //         return true
    //       }, trigger: 'blur' }
    //   ]
})
const handleRegister = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            console.log('表单数据：', formData)
            // 调用注册接口
            request({
                url: '/users/register/', // 注册接口路径，根据实际情况调整
                method: 'POST',
                data: {
                    username: formData.username,
                    phone: formData.phone,
                    email: formData.email,
                    password: formData.password
                }
            }).then(resp => {
                console.log(resp.data);
                if (resp.data.status === 200) {
                    ElMessage.success('注册成功，请登录')
                    router.push('/login') // 注册成功后跳转到登录页
                } else {
                    ElMessage.error(resp.data.message || '注册失败')
                }
            }).catch(error => {
                console.log(error)
                ElMessage.error('注册请求失败，请稍后重试')
            })
        }
    })
}
// 重置
const handleReset = () => {
    formRef.value.resetFields()
}

onMounted(() => {
    // 页面初始化逻辑
})

// 组件销毁时清除定时器
onBeforeUnmount(() => {
    if (timer) {
        clearInterval(timer)
    }
})
// 跳转首页
const gethome = () => {
    router.push('/')
}
// 跳转登录
const goToLogin = () => {
    router.push('/login')
}
</script>

<style scoped>
.container {
    max-width: 500px;
    margin: 50px auto;
    padding: 0 20px;
}

.box-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

.quick-login {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}
</style>